React Server Components: การสตรีมและการไฮเดรชั่นแบบเลือกสรร - คู่มือฉบับสมบูรณ์

React Server Components (RSC) แสดงถึงการเปลี่ยนแปลงกระบวนทัศน์ในการสร้างแอปพลิเคชัน React ซึ่งนำเสนอการปรับปรุงที่สำคัญในด้านประสิทธิภาพและประสบการณ์ผู้ใช้ ด้วยการย้ายการแสดงผลคอมโพเนนต์ไปยังเซิร์ฟเวอร์ RSCs ช่วยให้โหลดหน้าเว็บได้เร็วขึ้น ลด JavaScript ฝั่งไคลเอ็นต์ และปรับปรุง SEO คู่มือนี้ให้ภาพรวมที่ครอบคลุมของ RSCs โดยสำรวจแนวคิดของการสตรีมและการไฮเดรชั่นแบบเลือกสรร และแสดงให้เห็นถึงการประยุกต์ใช้งานจริงในการพัฒนาเว็บสมัยใหม่

React Server Components คืออะไร?

โดยทั่วไปแล้ว แอปพลิเคชัน React พึ่งพาการแสดงผลฝั่งไคลเอ็นต์ (CSR) เป็นอย่างมาก เบราว์เซอร์ดาวน์โหลดชุด JavaScript ดำเนินการ และจากนั้นแสดงผล UI กระบวนการนี้อาจนำไปสู่ความล่าช้า โดยเฉพาะอย่างยิ่งบนเครือข่ายหรืออุปกรณ์ที่ช้ากว่า Server-Side Rendering (SSR) ถูกนำมาใช้เพื่อแก้ไขปัญหานี้ โดยที่ HTML เริ่มต้นถูกแสดงผลบนเซิร์ฟเวอร์และส่งไปยังไคลเอ็นต์ ซึ่งช่วยปรับปรุง First Contentful Paint (FCP) อย่างไรก็ตาม SSR ยังคงต้องมีการไฮเดรตทั้งแอปพลิเคชันบนไคลเอ็นต์ ซึ่งอาจต้องใช้การคำนวณจำนวนมาก

React Server Components เสนอแนวทางที่แตกต่าง พวกเขาอนุญาตให้ส่วนต่างๆ ของแอปพลิเคชันของคุณถูกแสดงผลโดยตรงบนเซิร์ฟเวอร์ โดยไม่ต้องส่งไปยังไคลเอ็นต์เป็น JavaScript ซึ่งส่งผลให้เกิดประโยชน์ที่สำคัญหลายประการ:

• ลด JavaScript ฝั่งไคลเอ็นต์: JavaScript น้อยลงที่จะดาวน์โหลด แยกวิเคราะห์ และดำเนินการ หมายถึงการโหลดหน้าเว็บที่เร็วขึ้นและประสิทธิภาพที่ดีขึ้น โดยเฉพาะอย่างยิ่งบนอุปกรณ์พลังงานต่ำ
• ปรับปรุงประสิทธิภาพ: Server Components สามารถเข้าถึงทรัพยากรแบ็กเอนด์ได้โดยตรง ขจัดความจำเป็นในการเรียก API จากไคลเอ็นต์และลดเวลาแฝง
• ปรับปรุง SEO: HTML ที่แสดงผลบนเซิร์ฟเวอร์สามารถจัดทำดัชนีได้ง่ายโดยเครื่องมือค้นหา ซึ่งนำไปสู่การจัดอันดับ SEO ที่ดีขึ้น
• พัฒนาการที่เรียบง่าย: นักพัฒนาสามารถเขียนคอมโพเนนต์ที่ผสานรวมกับทรัพยากรแบ็กเอนด์ได้อย่างราบรื่นโดยไม่ต้องใช้กลยุทธ์การดึงข้อมูลที่ซับซ้อน

ลักษณะสำคัญของ Server Components:

• การดำเนินการบนเซิร์ฟเวอร์เท่านั้น: Server Components ทำงานเฉพาะบนเซิร์ฟเวอร์และไม่สามารถใช้ API เฉพาะของเบราว์เซอร์ เช่น window หรือ document
• การเข้าถึงข้อมูลโดยตรง: Server Components สามารถเข้าถึงฐานข้อมูล ระบบไฟล์ และทรัพยากรแบ็กเอนด์อื่นๆ ได้โดยตรง
• ไม่มี JavaScript ฝั่งไคลเอ็นต์: พวกเขาไม่มีส่วนเกี่ยวข้องกับขนาดชุด JavaScript ฝั่งไคลเอ็นต์
• การดึงข้อมูลแบบประกาศ: การดึงข้อมูลสามารถจัดการได้โดยตรงภายในคอมโพเนนต์ ทำให้โค้ดสะอาดขึ้นและเข้าใจง่ายขึ้น

ทำความเข้าใจเกี่ยวกับการสตรีม

การสตรีมเป็นเทคนิคที่ช่วยให้เซิร์ฟเวอร์ส่งส่วนต่างๆ ของ UI ไปยังไคลเอ็นต์เมื่อพร้อมใช้งาน แทนที่จะรอให้แสดงผลทั้งหน้า สิ่งนี้ช่วยปรับปรุงประสิทธิภาพที่รับรู้ของแอปพลิเคชันอย่างมาก โดยเฉพาะอย่างยิ่งสำหรับหน้าเว็บที่ซับซ้อนซึ่งมีการพึ่งพาข้อมูลหลายรายการ คิดถึงการดูสตรีมวิดีโอ – คุณไม่จำเป็นต้องรอให้ดาวน์โหลดวิดีโอทั้งหมดก่อนที่คุณจะเริ่มดู คุณสามารถเริ่มได้ทันทีเมื่อมีข้อมูลเพียงพอ

การทำงานของการสตรีมกับ React Server Components:

1. เซิร์ฟเวอร์เริ่มแสดงผลเชลล์เริ่มต้นของหน้า ซึ่งอาจรวมถึงเนื้อหาคงที่และคอมโพเนนต์ตัวยึด
2. เมื่อข้อมูลพร้อมใช้งาน เซิร์ฟเวอร์จะสตรีม HTML ที่แสดงผลสำหรับส่วนต่างๆ ของหน้าไปยังไคลเอ็นต์
3. ไคลเอ็นต์จะอัปเดต UI เป็นระยะๆ ด้วยเนื้อหาที่สตรีม ทำให้ได้รับประสบการณ์การใช้งานที่รวดเร็วและตอบสนองได้ดีขึ้น

ข้อดีของการสตรีม:

• Time to First Byte (TTFB) ที่เร็วขึ้น: HTML เริ่มต้นถูกส่งไปยังไคลเอ็นต์เร็วกว่ามาก ลดเวลาในการโหลดเริ่มต้น
• ปรับปรุงประสิทธิภาพที่รับรู้: ผู้ใช้เห็นเนื้อหาปรากฏบนหน้าจอเร็วขึ้น แม้ว่าทั้งหน้าจะยังไม่ถูกแสดงผลอย่างสมบูรณ์ก็ตาม
• ประสบการณ์ผู้ใช้ที่ดีขึ้น: การสตรีมสร้างประสบการณ์ผู้ใช้ที่มีส่วนร่วมและตอบสนองได้ดีขึ้น

ตัวอย่างของการสตรีม:

ลองนึกภาพฟีดโซเชียลมีเดีย ด้วยการสตรีม เลย์เอาต์พื้นฐานและโพสต์แรกๆ สามารถแสดงผลและส่งไปยังไคลเอ็นต์ได้ทันที เมื่อเซิร์ฟเวอร์ดึงข้อมูลโพสต์เพิ่มเติมจากฐานข้อมูล พวกเขาจะถูกสตรีมไปยังไคลเอ็นต์และต่อท้ายไปยังฟีด สิ่งนี้ช่วยให้ผู้ใช้สามารถเริ่มเรียกดูฟีดได้เร็วกว่ามาก โดยไม่ต้องรอให้โพสต์ทั้งหมดโหลด

การไฮเดรชั่นแบบเลือกสรร

การไฮเดรชั่นคือกระบวนการทำให้ HTML ที่แสดงผลบนเซิร์ฟเวอร์สามารถโต้ตอบได้บนไคลเอ็นต์ ใน SSR แบบดั้งเดิม แอปพลิเคชันทั้งหมดจะถูกไฮเดรต ซึ่งอาจเป็นกระบวนการที่ใช้เวลานาน ในทางกลับกัน การไฮเดรชั่นแบบเลือกสรรช่วยให้คุณสามารถไฮเดรตเฉพาะคอมโพเนนต์ที่ต้องมีการโต้ตอบ ซึ่งช่วยลด JavaScript ฝั่งไคลเอ็นต์และปรับปรุงประสิทธิภาพได้อีกด้วย สิ่งนี้มีประโยชน์อย่างยิ่งสำหรับหน้าเว็บที่มีทั้งเนื้อหาคงที่และเนื้อหาแบบโต้ตอบ

การทำงานของการไฮเดรชั่นแบบเลือกสรร:

1. เซิร์ฟเวอร์แสดงผล HTML เริ่มต้นสำหรับทั้งหน้า
2. ไคลเอ็นต์ไฮเดรตเฉพาะคอมโพเนนต์แบบโต้ตอบ เช่น ปุ่ม ฟอร์ม และองค์ประกอบแบบโต้ตอบ
3. คอมโพเนนต์คงที่ยังไม่ถูกไฮเดรต ลดปริมาณ JavaScript ที่ดำเนินการบนไคลเอ็นต์

ข้อดีของการไฮเดรชั่นแบบเลือกสรร:

• ลด JavaScript ฝั่งไคลเอ็นต์: JavaScript ที่ต้องดำเนินการน้อยลงหมายถึงการโหลดหน้าเว็บที่เร็วขึ้นและประสิทธิภาพที่ดีขึ้น
• ปรับปรุง Time to Interactive (TTI): เวลาที่ใช้เพื่อให้หน้าเว็บโต้ตอบได้อย่างสมบูรณ์จะลดลง ทำให้ได้รับประสบการณ์การใช้งานที่ดีขึ้น
• การใช้ทรัพยากรที่ดีที่สุด: ทรัพยากรของไคลเอ็นต์ถูกใช้อย่างมีประสิทธิภาพมากขึ้น เนื่องจากมีการไฮเดรตเฉพาะคอมโพเนนต์ที่จำเป็นเท่านั้น

ตัวอย่างของการไฮเดรชั่นแบบเลือกสรร:

ลองพิจารณาหน้าผลิตภัณฑ์อีคอมเมิร์ซ คำอธิบายผลิตภัณฑ์ รูปภาพ และการให้คะแนนเป็นเนื้อหาคงที่โดยทั่วไป อย่างไรก็ตาม ปุ่ม "เพิ่มลงในรถเข็น" และตัวเลือกปริมาณมีการโต้ตอบ ด้วยการไฮเดรชั่นแบบเลือกสรร มีเพียงปุ่ม "เพิ่มลงในรถเข็น" และตัวเลือกปริมาณเท่านั้นที่ต้องไฮเดรต ในขณะที่ส่วนที่เหลือของหน้าเว็บยังไม่ถูกไฮเดรต ซึ่งนำไปสู่เวลาในการโหลดที่เร็วขึ้นและประสิทธิภาพที่ดีขึ้น

การรวมการสตรีมและการไฮเดรชั่นแบบเลือกสรร

พลังที่แท้จริงของ React Server Components อยู่ที่การรวมการสตรีมและการไฮเดรชั่นแบบเลือกสรร ด้วยการสตรีม HTML เริ่มต้นและเลือกไฮเดรตเฉพาะคอมโพเนนต์แบบโต้ตอบ คุณสามารถปรับปรุงประสิทธิภาพได้อย่างมากและสร้างประสบการณ์ผู้ใช้ที่ตอบสนองได้อย่างแท้จริง

ลองนึกภาพแอปพลิเคชันแดชบอร์ดที่มีวิดเจ็ตหลายรายการ ด้วยการสตรีม เลย์เอาต์พื้นฐานของแดชบอร์ดสามารถแสดงผลและส่งไปยังไคลเอ็นต์ได้ทันที เมื่อเซิร์ฟเวอร์ดึงข้อมูลสำหรับแต่ละวิดเจ็ต เซิร์ฟเวอร์จะสตรีม HTML ที่แสดงผลไปยังไคลเอ็นต์ และไคลเอ็นต์เลือกไฮเดรตเฉพาะวิดเจ็ตแบบโต้ตอบ เช่น แผนภูมิและตารางข้อมูล สิ่งนี้ช่วยให้ผู้ใช้สามารถเริ่มโต้ตอบกับแดชบอร์ดได้เร็วขึ้นมาก โดยไม่ต้องรอให้วิดเจ็ตทั้งหมดโหลดและไฮเดรต

การนำไปใช้งานจริงกับ Next.js

Next.js เป็นเฟรมเวิร์ก React ยอดนิยมที่ให้การสนับสนุนในตัวสำหรับ React Server Components, การสตรีม และการไฮเดรชั่นแบบเลือกสรร ทำให้ง่ายต่อการนำเทคโนโลยีเหล่านี้ไปใช้ในโปรเจกต์ของคุณ Next.js 13 และเวอร์ชันที่ใหม่กว่าได้นำ RSCs มาใช้เป็นคุณสมบัติหลัก

การสร้าง Server Component ใน Next.js:

โดยค่าเริ่มต้น คอมโพเนนต์ในไดเรกทอรี app ของโปรเจกต์ Next.js จะถูกถือเป็น Server Components คุณไม่จำเป็นต้องเพิ่มคำสั่งหรือคำอธิบายประกอบพิเศษใดๆ นี่คือตัวอย่าง:

            // app/components/MyServerComponent.js
import { getData } from './data';

async function MyServerComponent() {
  const data = await getData();

  return (
    <div>
      <h2>Data from Server</h2>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default MyServerComponent;

            

              
                Copy
              
            
          

ในตัวอย่างนี้ MyServerComponent ดึงข้อมูลโดยตรงจากเซิร์ฟเวอร์โดยใช้ฟังก์ชัน getData คอมโพเนนต์นี้จะถูกแสดงผลบนเซิร์ฟเวอร์ และ HTML ที่ได้จะถูกส่งไปยังไคลเอ็นต์

การสร้าง Client Component ใน Next.js:

ในการสร้าง Client Component คุณต้องเพิ่มคำสั่ง "use client" ที่ด้านบนสุดของไฟล์ สิ่งนี้จะบอก Next.js ให้แสดงผลคอมโพเนนต์บนไคลเอ็นต์ Client Components สามารถใช้ API เฉพาะของเบราว์เซอร์และจัดการการโต้ตอบของผู้ใช้

            // app/components/MyClientComponent.js
"use client";

import { useState } from 'react';

function MyClientComponent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default MyClientComponent;

            

              
                Copy
              
            
          

ในตัวอย่างนี้ MyClientComponent ใช้ hook useState เพื่อจัดการสถานะของคอมโพเนนต์ คอมโพเนนต์นี้จะถูกแสดงผลบนไคลเอ็นต์ และผู้ใช้สามารถโต้ตอบกับมันได้

การผสม Server and Client Components:

คุณสามารถผสม Server and Client Components ในแอปพลิเคชัน Next.js ของคุณ Server Components สามารถนำเข้าและแสดงผล Client Components ได้ แต่ Client Components ไม่สามารถนำเข้า Server Components ได้โดยตรง ในการส่งข้อมูลจาก Server Component ไปยัง Client Component คุณสามารถส่งข้อมูลเป็น props ได้

            // app/page.js
import MyServerComponent from './components/MyServerComponent';
import MyClientComponent from './components/MyClientComponent';

async function Page() {
  return (
    <div>
      <MyServerComponent />
      <MyClientComponent />
    </div>
  );
}

export default Page;

            

              
                Copy
              
            
          

ในตัวอย่างนี้ คอมโพเนนต์ Page เป็น Server Component ที่แสดงผลทั้ง MyServerComponent และ MyClientComponent

การดึงข้อมูลใน Server Components:

Server Components สามารถเข้าถึงทรัพยากรแบ็กเอนด์ได้โดยตรงโดยไม่จำเป็นต้องเรียก API จากไคลเอ็นต์ คุณสามารถใช้ไวยากรณ์ async/await เพื่อดึงข้อมูลโดยตรงภายในคอมโพเนนต์

            // app/components/MyServerComponent.js

async function getData() {
  const res = await fetch('https://api.example.com/data');
  if (!res.ok) {
    throw new Error('Failed to fetch data');
  }
  return res.json();
}

async function MyServerComponent() {
  const data = await getData();

  return (
    <div>
      <h2>Data from Server</h2>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default MyServerComponent;

            

              
                Copy
              
            
          

ในตัวอย่างนี้ ฟังก์ชัน getData ดึงข้อมูลจาก API ภายนอก MyServerComponent รอผลลัพธ์ของฟังก์ชัน getData และแสดงผลข้อมูลใน UI

ตัวอย่างและการใช้งานจริง

React Server Components, การสตรีม และการไฮเดรชั่นแบบเลือกสรรเหมาะอย่างยิ่งสำหรับแอปพลิเคชันประเภทต่อไปนี้:

• เว็บไซต์อีคอมเมิร์ซ: หน้าผลิตภัณฑ์ หน้าหมวดหมู่ และรถเข็นสินค้าสามารถได้รับประโยชน์จากการโหลดหน้าเว็บที่เร็วขึ้นและประสิทธิภาพที่ดีขึ้น
• เว็บไซต์ที่มีเนื้อหาจำนวนมาก: บล็อก เว็บไซต์ข่าวสาร และเว็บไซต์เอกสารประกอบสามารถใช้การสตรีมเพื่อส่งมอบเนื้อหาได้เร็วขึ้นและปรับปรุง SEO
• แดชบอร์ดและแผงผู้ดูแลระบบ: แดชบอร์ดที่ซับซ้อนพร้อมวิดเจ็ตหลายรายการสามารถได้รับประโยชน์จากการไฮเดรชั่นแบบเลือกสรรเพื่อลด JavaScript ฝั่งไคลเอ็นต์และปรับปรุงการโต้ตอบ
• แพลตฟอร์มโซเชียลมีเดีย: ฟีด โปรไฟล์ และไทม์ไลน์สามารถใช้การสตรีมเพื่อส่งมอบเนื้อหาอย่างต่อเนื่องและปรับปรุงประสบการณ์ผู้ใช้

ตัวอย่างที่ 1: เว็บไซต์อีคอมเมิร์ซระดับนานาชาติ

เว็บไซต์อีคอมเมิร์ซที่ขายสินค้าทั่วโลกสามารถใช้ RSCs เพื่อดึงรายละเอียดผลิตภัณฑ์โดยตรงจากฐานข้อมูลตามตำแหน่งของผู้ใช้ ส่วนคงที่ของหน้า (คำอธิบายผลิตภัณฑ์ รูปภาพ) จะถูกแสดงผลบนเซิร์ฟเวอร์ ในขณะที่องค์ประกอบแบบโต้ตอบ (ปุ่มเพิ่มลงในรถเข็น ตัวเลือกปริมาณ) จะถูกไฮเดรตบนไคลเอ็นต์ การสตรีมช่วยให้มั่นใจได้ว่าผู้ใช้เห็นข้อมูลผลิตภัณฑ์พื้นฐานได้อย่างรวดเร็ว ในขณะที่เนื้อหาที่เหลือจะโหลดในพื้นหลัง

ตัวอย่างที่ 2: แพลตฟอร์มข่าวสารระดับโลก

แพลตฟอร์มข่าวสารที่กำหนดเป้าหมายผู้ชมทั่วโลกสามารถใช้ RSCs เพื่อดึงบทความข่าวสารจากแหล่งต่างๆ ตามภาษาและภูมิภาคของผู้ใช้ การสตรีมช่วยให้เว็บไซต์สามารถส่งมอบเลย์เอาต์หน้าแรกและพาดหัวข่าวได้อย่างรวดเร็ว ในขณะที่บทความฉบับเต็มจะโหลดในพื้นหลัง การไฮเดรชั่นแบบเลือกสรรสามารถใช้เพื่อไฮเดรตองค์ประกอบแบบโต้ตอบ เช่น ส่วนความคิดเห็นและปุ่มแชร์บนโซเชียลมีเดีย

แนวทางปฏิบัติที่ดีที่สุดสำหรับการใช้ React Server Components

เพื่อให้ได้ประโยชน์สูงสุดจาก React Server Components, การสตรีม และการไฮเดรชั่นแบบเลือกสรร ให้พิจารณาแนวทางปฏิบัติที่ดีที่สุดต่อไปนี้:

• ระบุ Server และ Client Components: วิเคราะห์แอปพลิเคชันของคุณอย่างรอบคอบและพิจารณาว่าคอมโพเนนต์ใดสามารถแสดงผลบนเซิร์ฟเวอร์และคอมโพเนนต์ใดที่ต้องแสดงผลบนไคลเอ็นต์
• ปรับการดึงข้อมูลให้เหมาะสม: ใช้เทคนิคการดึงข้อมูลที่มีประสิทธิภาพเพื่อลดปริมาณข้อมูลที่ถ่ายโอนจากเซิร์ฟเวอร์ไปยังไคลเอ็นต์
• ใช้ประโยชน์จากการแคช: ใช้กลยุทธ์การแคชเพื่อลดภาระบนเซิร์ฟเวอร์และปรับปรุงประสิทธิภาพ
• ตรวจสอบประสิทธิภาพ: ใช้เครื่องมือตรวจสอบประสิทธิภาพเพื่อระบุและแก้ไขปัญหาคอขวดด้านประสิทธิภาพ
• การปรับปรุงอย่างต่อเนื่อง: ออกแบบแอปพลิเคชันของคุณให้ทำงานได้แม้ว่า JavaScript จะถูกปิดใช้งาน โดยมอบฟังก์ชันการทำงานพื้นฐานให้กับผู้ใช้ทุกคน

ความท้าทายและข้อควรพิจารณา

ในขณะที่ React Server Components มอบประโยชน์ที่สำคัญ มีความท้าทายและข้อควรพิจารณาบางประการที่คุณควรคำนึงถึง:

• ความซับซ้อน: การใช้ RSCs สามารถเพิ่มความซับซ้อนให้กับแอปพลิเคชันของคุณได้ โดยเฉพาะอย่างยิ่งหากคุณไม่คุ้นเคยกับการแสดงผลและสตรีมฝั่งเซิร์ฟเวอร์
• การแก้ไขข้อบกพร่อง: การแก้ไขข้อบกพร่อง RSCs อาจเป็นเรื่องที่ท้าทายกว่าการแก้ไขข้อบกพร่องคอมโพเนนต์ฝั่งไคลเอ็นต์แบบดั้งเดิม เนื่องจากคุณต้องพิจารณาทั้งเซิร์ฟเวอร์และไคลเอ็นต์
• เครื่องมือ: เครื่องมือต่างๆ รอบ RSCs ยังคงมีการพัฒนา ดังนั้นคุณอาจพบข้อจำกัดหรือปัญหาบางอย่าง
• เส้นโค้งการเรียนรู้: มีเส้นโค้งการเรียนรู้ที่เกี่ยวข้องกับการทำความเข้าใจและใช้ RSCs อย่างมีประสิทธิภาพ

บทสรุป

React Server Components, การสตรีม และการไฮเดรชั่นแบบเลือกสรรแสดงถึงความก้าวหน้าครั้งสำคัญในการพัฒนาเว็บ ด้วยการย้ายการแสดงผลคอมโพเนนต์ไปยังเซิร์ฟเวอร์ เทคโนโลยีเหล่านี้ช่วยให้การโหลดหน้าเว็บเริ่มต้นเร็วขึ้น ลด JavaScript ฝั่งไคลเอ็นต์ และปรับปรุง SEO แม้ว่าจะมีข้อท้าทายและข้อควรพิจารณาบางประการที่ต้องคำนึงถึง แต่ประโยชน์ของ RSCs นั้นปฏิเสธไม่ได้ และมีแนวโน้มที่จะกลายเป็นส่วนหนึ่งของระบบนิเวศ React มาตรฐาน ด้วยการนำเทคโนโลยีเหล่านี้มาใช้ คุณสามารถสร้างเว็บแอปพลิเคชันที่เร็วขึ้น มีประสิทธิภาพมากขึ้น และเป็นมิตรกับผู้ใช้มากขึ้น

แหล่งข้อมูลเพิ่มเติม

• React 18 Official Announcement
• Next.js App Router Documentation
• React Server Components - Patterns.dev